<template>
	<div class="goods-comment">
		<!-- 导航 -->
		<van-nav-bar
			title="商品详情"
			fixed
			safe-area-inset-top
			:z-index="5"
			placeholder
			left-arrow
			left-text="返回"
			@click-left="$router.back()"
			@click-right="$router.push('/')"
		>
			<template #right>
				<van-icon name="wap-home-o" size="20" />
			</template>
		</van-nav-bar>
		<!-- 轮播图 -->
		<div class="box">
			<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
				<van-swipe-item v-for="item in banner">
					<van-image class="images" fit="cover" :src="item.src" />
				</van-swipe-item>
			</van-swipe>
		</div>
		<!-- 商品信息 -->
		<div class="info box">
			<!-- 标题 -->
			<h2 class="title">{{ comment.title }}</h2>
			<!-- 售价 -->
			<div class="price">
				<span class="origin">
					市场价：
					<s>￥{{ comment.market_price }}</s>
				</span>
				<span class="now">
					销售价：
					<b>￥{{ comment.sell_price }}</b>
				</span>
			</div>
			<!-- 步进器 -->
			<div class="stepper">
				<p style="margin-right: 20px;">购买数量：</p>
				<van-stepper
					v-model="count"
					theme="round"
					button-size="22"
					disable-input
					max="9"
					disable-input
					long-press
				/>
			</div>
			<!-- 按钮 -->
			<div class="btn" style="margin: 20px;">
				<van-button type="info" size="small" style="margin-right: 5px;">
					立即购买
				</van-button>
				<van-button type="danger" size="small" @click="joinCar">加入购物车</van-button>
			</div>
		</div>
		<!-- 商品参数 -->
		<div class="desc box">
			<h3 class="title">商品参数</h3>
			<div class="main">
				<span>商品货号：{{ comment.goods_no }}</span>
				<span>库存情况：{{ comment.stock_quantity }}</span>
				<span>上架时间：{{ comment.add_tiem | formatDate }}</span>
			</div>
		</div>
		<!-- 控件 -->
		<div class="btn box">
			<van-button
				type="info"
				block
				plain
				style="margin-bottom: 20px;"
				@click="$router.push(`/goods_desc/${$route.params.id}`)"
			>
				图文介绍
			</van-button>
			<van-button
				type="danger"
				block
				plain
				@click="
					$router.push({ path: `/article/${$route.params.id}`, query: { type: '评论' } })
				"
			>
				商品评论
			</van-button>
		</div>
	</div>
</template>

<script>
import { getGoodsInfo, getThumimages } from '@/apis/index.js';
export default {
	async created() {
		this.comment = (await getGoodsInfo(this.$route.params.id)).data.message[0];
		// console.log(this.comment);
		this.banner = (await getThumimages(this.$route.params.id)).data.message;
		// console.log(this.banner);
	},
	data() {
		return {
			comment: {},
			banner: [],
			count: 1,
			shopcarList: localStorage.getItem('shopcarList')
				? JSON.parse(localStorage.getItem('shopcarList'))
				: []
		};
	},
	methods: {
		// 加入购物车
		joinCar() {
			this.$toast.success('已添加');
			// 判断该商品是否存在
			const index = this.shopcarList.findIndex(item => item.id === this.comment.id);
			// console.log(index);
			// 不存在，加入购物车
			if (index === -1)
				this.shopcarList.push({
					id: this.comment.id,
					count: this.count,
					sell_price: this.comment.sell_price
				});
				// 存在，修改商品数量
			if (index !== -1) this.shopcarList[index].count = this.count;
		}
	},
	watch: {
		// 写入本地存储
		shopcarList: {
			deep: true,
			handler() {
				localStorage.setItem('shopcarList', JSON.stringify(this.shopcarList));
			}
		}
	}
};
</script>

<style scoped lang="less">
.desc {
	.title {
		border-bottom: 1px #ccc solid;
		height: 40px;
		line-height: 40px;
	}
	.main {
		padding-left: 40px;
		margin-top: 20px;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		height: 70px;
	}
}
.stepper {
	display: flex;
	align-items: center;
	margin: 20px;
}
.goods-comment {
	font-size: 12px;
	color: #53575e;
}
.box {
	border: 1px solid #ccc;
	border-radius: 5px;
	box-shadow: inset 1px 1px 5px 0px rgba(45, 44, 44, 0.17);
	margin: 5px;
	box-sizing: border-box;
	padding: 10px;
}
.my-swipe {
	height: 200px;
	text-align: center;
}
.info {
	.title {
		font-size: 18px;
		color: #0088d1;
		font-weight: bold;
		border-bottom: 1px #ccc solid;
		// height: 40px;
		line-height: 40px;
	}
	.price {
		margin: 20px;
		.now {
			margin-left: 20px;
			b {
				font-size: 18px;
				color: red;
			}
		}
	}
}
</style>
